<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/statics/css/battery.css">
    <script src="/appjs/battery/echarts.min.js"></script>
    <title>AI电池检测报告</title>
</head>
<body>
<%--    <div class="warpContent topWrap" style="margin-top: 0">--%>
<%--        <img src="/statics/img/topBg.png" alt="">--%>
<%--        <div class="timeBlock">--%>
<%--            <span>检验时长：<span class="deltaTime">00:00:00</span></span><span>报告生成：<span class="createdTime"></span></span>--%>
<%--        </div>--%>
<%--    </div>--%>
<div class="batteryMsg">
    <div class="new_type2">

        <span class="">会员名：</span>
        <span class="nickname"></span>
    </div>
<%--    <div class="line"></div>--%>
    <div class="new_type2">

        <span class="">会员手机号：</span>
        <span class="mobile"></span>
    </div>
<%--    <div class="line"></div>--%>
    <div class="new_type2">

        <span class="">车辆型号：</span>
        <span class="carBrand"></span>
    </div>
    <div class="new_type2">

        <span class="">车牌号：</span>
        <span class="carNo"></span>
    </div>
</div>
    <div class="warpContent whiteBg">
        <div class="carMsgList">
            <%--<img src="${ctx}/front/img/battery/carLogo.png" class="carLogo" alt="">--%>
<%--            <div class="carMsgBlock">--%>
<%--                <span class="carBrand">-</span>--%>
<%--                <span class="carNo" style="font-size: 13px">-</span>--%>
<%--            </div>--%>
            <div class="checkBlock new_type3" style="font-size: 13px">第<span class="count">0</span>次检测</div>
                <div class="new_type3">

                    <span class="">充电订单号：</span>
                    <span class="outOrderNum"></span>
                </div>
                <div class="new_type3">

                    <span class="">检测时长：</span>
                    <span class="deltaTime"></span>
                </div>
                <div class="new_type3"

                    <span class="">生成时间：</span>
                    <span class="createdTime"></span>
                </div>
        </div>
        <div class="batteryMsg">
            <div class="new_type1">
                 <span class="value batteryType">-</span>
                 <span class="label">电池类型</span>
            </div>
            <div class="line"></div>
            <div class="new_type1">
                <span class="value chargeEnergy">-</span>
                <span class="label">本次充电</span>
            </div>
            <div class="line"></div>
            <div class="new_type1">
                <span class="value changeSoc">-</span>
                <span class="label">soc变化</span>
            </div>
        </div>
    </div>
    <div class="warpContent whiteBg">
        <div class="titleBlock">电池整体表现</div>
        <div class="pingfenBlock">
            <div class="pingfenLogo">
                <span class="point">-</span>
            </div>
            <div class="winBlock">
                <p>击败了<span class="orangePercent percentFont totalRank">-</span>新能源车主！</p>
                <p>击败了<span class="bluePercent percentFont brandRank">-</span>您同品牌车主！</p>
            </div>
            <div class="new_type4">
            <div class="remarkBlock explain1">
                -
            </div>
            <div class="remarkBlock suggestion">
                -
            </div>
            </div>
        </div>

    </div>
    <div class="warpContent whiteBg">
        <div class="headerBlock">
        <div class="titleBlock">检测明细</div>
            <%--<div class="checkTypeBlock">检测方式：-</div>--%>
        </div>
        <div class="innerTitleBlock">
            <span class="innerTitle">电池功能表现</span>
            <span class="score"><span class="behaveConclusion"></span>&nbsp;<span class="behaveScore">-</span>分</span>
        </div>
        <table class="batteryTable">
            <thead>
                <th width="40%">项目</th>
                <th width="20%">参考值</th>
                <th width="20%">检测值</th>
                <th width="20%">检测结果</th>
            </thead>
            <tbody class="behaveTable">

            </tbody>
        </table>
        <div class="remarkBlock behaveExplain1">
            -
        </div>
        <div class="innerTitleBlock">
        <span class="innerTitle">电池安全性能</span>
        <span class="score"><span class="safeConclusion"></span>&nbsp;<span class="safeScore">-</span>分</span>
    </div> vv
        <table class="batteryTable">
            <thead>
            <th width="40%">项目</th>
            <th width="20%">参考值</th>
            <th width="20%">检测值</th>
            <th width="20%">检测结果</th>
            </thead>
            <tbody class="safeTable">
            </tbody>
        </table>
        <div class="remarkBlock safeExplain1">
            -
        </div>
        <div class="innerTitleBlock ">
            <span class="innerTitle">电池损伤检测</span>
            <span class="score"><span class="hurtConclusion"></span>&nbsp;<span class="hurtScore">-</span>分</span>
        </div>
        <table class="batteryTable">
            <thead>
            <th width="40%">项目</th>
            <th width="20%">参考值</th>
            <th width="20%">检测值</th>
            <th width="20%">检测结果</th>
            </thead>
            <tbody class="hurtTable">
            </tbody>
        </table>
        <div class="remarkBlock hurtExplain1">
            -
        </div>
    </div>
    <div class="warpContent whiteBg">
        <div class="titleBlock">检测过程数据</div>
        <div id="myChart1" class="chart" style="width: 100%;height:200px"></div>
        <div class="crossList"></div>
        <div id="myChart2" class="chart" style="width: 100%;height:200px"></div>
        <div class="remarkBlock chartRemarkBlock" style="margin-top: 20px">
            <img src="/statics/img/vIcon.png" alt="">电芯单体最大电压:<span class="orangeFont maxVolCell" style="margin-left: 15px"></span>
        </div>
        <div class="remarkBlock chartRemarkBlock">
            <img src="/statics/img/cIcon.png" alt="">电池温度: <span class="label">最高:</span><span class="orangeFont maxTemp"></span><span class="label">最低:</span><span class="blueFont minTemp"></span>
        </div>
    </div>
    <p class="fotterTips">-检测结果仅供参考，最终解释权归广东劲天科技有限公司所有-</p>
    <%--<div class="shareBtn">--%>
        <%--分享报告通知好友--%>
    <%--</div>--%>
</body>
</html>
<script>
    /*获取地址栏参数*/
    function getUrlString(name) {//此方法为 获取浏览器的参数
        var reg = new RegExp(name + "=([^&]*)");
        var r = window.location.href.match(reg);
        if (r != null) return r[1];
        return null;
    }
    var outOrderNum = decodeURI(getUrlString("outOrderNum")) == "null" ? '' : decodeURI(getUrlString("outOrderNum"));
    $(function () {
        $.ajax({
            url: "${ctx}/battery/getSimpleReport",
            // url:prefix +"/getSimpleReport
            type:"get",
            "headers": {
                // "Authorization":"Bearer rR6JkBNFlD92ayZnIpDV2R"
            },
            data: {
                "outOrderNum":outOrderNum
            },
            success: function (data) {
                if(data.status==200){
                    console.log(data);
                    // var totalData = data.getSimpleReportData;
                    for (var key in data) {
                        var totalData = data[key].getSimpleReportData;
                        var totalData2 = data[key].nickname;
                        var totalData3 = data[key].mobile;
                    }
                    // console.log(totalData3);
                    $(".outOrderNum").html(totalData.outOrderNum);
                    $(".nickname").html(totalData2);
                    $(".mobile").html(totalData3);
                    $(".totalRank").html(((1-((totalData.totalRank)/(totalData.totalCarNum)))*100).toFixed(2)=="NaN"?'-':((1-((totalData.totalRank)/(totalData.totalCarNum)))*100).toFixed(2)+"%");
                    $(".brandRank").html(((1-((totalData.brandRank)/(totalData.brandCarNum)))*100).toFixed(2)=="NaN"?'-':((1-((totalData.brandRank)/(totalData.brandCarNum)))*100).toFixed(2)+"%");
                    $(".deltaTime").html(timeFilter(totalData.deltaTime));//检测时长
                    $(".createdTime").html(totalData.createdTime)//报告生成时间
                    // $(".carBrand").html(totalData.carBrand + totalData.carModel)//车辆品牌
                    $(".carBrand").html(totalData.carBrand)//车辆品牌
                    $(".carNo").html(totalData.carNo)//车牌号
                    $(".count").html(totalData.detectNum)//检测次数
                    $(".batteryType").html(batteryTypeFilter(totalData.batteryType));//电池类型
                    $(".chargeEnergy").html(((totalData.chargeEnergy)/1000).toFixed(2)+"kw/h")//本次充电量
                    $(".changeSoc").html(parseInt(totalData.endSoc)-parseInt(totalData.beginSoc)+"%")//soc变化
                    $(".maxVolCell").html(totalData.maxVolCell+"V")//单体最高电压
                    $(".maxTemp").html(totalData.maxTemp+"度")//电池最高温度
                    $(".minTemp").html(totalData.minTemp+"度")//电池最高温度
                    chart1([totalData.maxVolReq,totalData.maxVolMeas,totalData.maxVolConn]);
                    chart2([totalData.maxElectReq,totalData.maxElectMeas,totalData.maxElectConn])
                    for(var i=0;i<totalData.model.length;i++){
                        if(totalData.model[i].moduleName=="电池整体表现"){
                            $(".point").html(totalData.model[i].score)//评分
                            $(".explain1").html("结果说明: "+totalData.model[i].explain1)//结果说明
                            $(".suggestion").html("检测建议: "+totalData.model[i].suggestion)//建议
                        }else if(totalData.model[i].moduleName=="电池功能表现"){
                            $(".behaveConclusion").html(totalData.model[i].conclusion)//表现
                            $(".behaveScore").html(totalData.model[i].score);//表现分
                            $(".behaveExplain1").html("评测结论 : "+totalData.model[i].explain1);
                            var tableData = ''
                            for(var j=0;j<totalData.model[i].project.length;j++){
                                var referenceValue = ''
                               // console.log(totalData.model[i].project[j].referenceValue)
                                if(totalData.model[i].project[j].referenceValue == null||totalData.model[i].project[j].referenceValue.indexOf("None")>0 || totalData.model[i].project[j].referenceValue =="None"){
                                    referenceValue = "/"
                                }else{
                                    referenceValue = totalData.model[i].project[j].referenceValue
                                }
                                tableData +=`<tr>
                                                <td class="orangeFont">\${totalData.model[i].project[j].projectName}</td>
                                                <td>\${referenceValue}</td>
                                                <td>\${(parseFloat(totalData.model[i].project[j].detectionValue)*100).toFixed(2)+"%"}</td>
                                                <td class="errorFont">\${totalData.model[i].project[j].conclusion}</td>
                                            </tr>`
                            }
                            $(".behaveTable").append(tableData)
                        }else if(totalData.model[i].moduleName=="电池安全性能"){
                            $(".safeConclusion").html(totalData.model[i].conclusion)//表现
                            $(".safeScore").html(totalData.model[i].score);//表现分
                            $(".safeExplain1").html("评测结论 : "+totalData.model[i].explain1);
                            var tableData = ''
                            for(var j=0;j<totalData.model[i].project.length;j++){
                                var referenceValue = ''
                                if( totalData.model[i].project[j].referenceValue ==null||totalData.model[i].project[j].referenceValue =="null"|| totalData.model[i].project[j].referenceValue.indexOf("None")>0 || totalData.model[i].project[j].referenceValue =="None"){
                                    referenceValue = "/"
                                }else{
                                    referenceValue = totalData.model[i].project[j].referenceValue
                                }
                                tableData +=`<tr>
                                                <td class="orangeFont">\${totalData.model[i].project[j].projectName}</td>
                                                <td>\${referenceValue}</td>
                                                <td>\${(parseFloat(totalData.model[i].project[j].detectionValue)*100).toFixed(2)+"%"}</td>
                                                <td class="errorFont">\${totalData.model[i].project[j].conclusion}</td>
                                            </tr>`
                            }
                            $(".safeTable").append(tableData)
                        }else if(totalData.model[i].moduleName=="电池损伤检测"){
                            $(".hurtConclusion").html(totalData.model[i].conclusion)//表现
                            $(".hurtScore").html(totalData.model[i].score);//表现分
                            $(".hurtExplain1").html("评测结论 : "+totalData.model[i].explain1);
                            var tableData = ''
                            for(var j=0;j<totalData.model[i].project.length;j++){
                                var referenceValue = ''
                                if( totalData.model[i].project[j].referenceValue ==null||totalData.model[i].project[j].referenceValue.indexOf("None")>0 || totalData.model[i].project[j].referenceValue =="None"){
                                    referenceValue = "/"
                                }else{
                                    referenceValue = totalData.model[i].project[j].referenceValue
                                }
                                tableData +=`<tr>
                                                <td class="orangeFont">\${totalData.model[i].project[j].projectName}</td>
                                                <td>\${referenceValue}</td>
                                                <td>\${(parseFloat(totalData.model[i].project[j].detectionValue)*100).toFixed(2)+"%"}</td>
                                                <td class="errorFont">\${totalData.model[i].project[j].conclusion}</td>
                                            </tr>`
                            }
                            $(".hurtTable").append(tableData)
                        }
                    }
                }
            }
        })
    })

    function timeFilter(dataTime){
        var dataTime = parseInt(dataTime);
        if(dataTime<0){
            $(".timeNum").html("00:00:00");
            return;
        }
        var h = Math.floor((dataTime / 3600));
        var m = Math.floor((dataTime / 60 % 60));
        var s = Math.floor((dataTime % 60));
        if (h < 10) {
            h = "0" + Math.floor((dataTime / 3600));
        }
        if (m < 10) {
            m = "0" + Math.floor((dataTime / 60 % 60));
        }
        if (s < 10) {
            s = "0" + Math.floor((dataTime % 60));
        }
        return h + ":" + m + ":" + s
    }

    function batteryTypeFilter(val){
        var batteryType = '';
        switch (val) {
            case "1":
                batteryType = "铅酸电池";
                break;
            case "2":
                batteryType = "镍氢电池";
                break
            case "3":
                batteryType = "磷酸铁锂电池";
                break
            case "4":
                batteryType = "锰酸锂电池";
                break
            case "5":
                batteryType = "钴酸锂电池";
                break
            case "6":
                batteryType = "三元材料电池";
                break
            case "7":
                batteryType = "聚合物锂离子电池";
                break
            case "8":
                batteryType = "钛酸锂电池";
                break
            case "999":
                batteryType = "其他电池";
                break
        }
        return batteryType
    }


    function chart1(valueArr) {
        var myChart = echarts.init(document.getElementById('myChart1'));
        // myChart.showLoading();
        // 基于准备好的dom，初始化echarts实例
        var time = ['最高需求电压', '最高测量电压', '最高输出电压'];
        var valueArr = valueArr;
        myChart.setOption({
            title: {
                x:'-5px',
                text: '单位（V）',
                textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontFamily: 'Arial, Verdana, sans...',
                    fontSize: 13,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    color:'#636978'
                },
            },
            tooltip: {
                trigger: "axis",
                show: true
            },
            grid: {
                width: "100%",
                height: "80%",
                left: "1%",
                bottom: "0%",
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: time,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#636978",
                        fontSize: "13"
                    },
                    interval: 0
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#323243",
                        width: 1
                    }
                },
                axisLine: {
                    show:false,
                    lineStyle: {
                        color: "#fff",
                        width: 1 //这里是为了突出显示加上的
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#b1b5bf",
                        fontSize: "13"
                    },
                    interval: 0
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#d9dde6",
                        width: 1,
                         type:'dashed'
                    }
                },
                axisLine: {
                    show:false,
                    lineStyle: {
                        color: "#fff",
                        width: 1 //这里是为了突出显示加上的
                    }
                }
            },
            series: [{
                data: valueArr,
                type: 'bar',
                smooth: true,
                barGap: "20%",
                barWidth: 36,
                // symbol: "none",
                sampling: "average",
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: "#636978",
                        fontSize: "13"
                    },
                },
                itemStyle: {
                    normal: {
                        // color: "#E33F64",
                        lineStyle: {
                            width: 1, //设置线条粗细,
                            color: "#E33F64"
                        },
                        color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#FADC26"
                            },
                            {
                                offset: 1,
                                color: "#F5A73E"
                            }
                        ])
                    }
                },
            }]
        })
    }
    function chart2(valueArr) {
        var myChart = echarts.init(document.getElementById('myChart2'));
        // myChart.showLoading();
        // 基于准备好的dom，初始化echarts实例
        var time = ['最高需求电流', '最高测量电流', '最高输出电流'];
        var valueArr = valueArr;
        myChart.setOption({
            title: {
                x:'-5px',
                text: '单位（A）',
                textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontFamily: 'Arial, Verdana, sans...',
                    fontSize: 13,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    color:'#636978'
                },
            },
            tooltip: {
                trigger: "axis",
                show: true
            },
            grid: {
                width: "100%",
                height: "80%",
                left: "1%",
                bottom: "0%",
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: time,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#636978",
                        fontSize: "13"
                    },
                    interval: 0
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#323243",
                        width: 1
                    }
                },
                axisLine: {
                    show:false,
                    lineStyle: {
                        color: "#fff",
                        width: 1 //这里是为了突出显示加上的
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#b1b5bf",
                        fontSize: "13"
                    },
                    interval: 0
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#d9dde6",
                        width: 1,
                        type:'dashed'
                    }
                },
                axisLine: {
                    show:false,
                    lineStyle: {
                        color: "#fff",
                        width: 1 //这里是为了突出显示加上的
                    }
                }
            },
            series: [{
                data: valueArr,
                type: 'bar',
                smooth: true,
                barGap: "20%",
                barWidth: 36,
                // symbol: "none",
                sampling: "average",
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: "#636978",
                        fontSize: "13"
                    },
                },
                itemStyle: {
                    normal: {
                        // color: "#E33F64",
                        lineStyle: {
                            width: 1, //设置线条粗细,
                            color: "#E33F64"
                        },
                        color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#FADC26"
                            },
                            {
                                offset: 1,
                                color: "#F5A73E"
                            }
                        ])
                    }
                },
            }]
        })
    }
</script>